<template>
  <div class="page">
    <h2 @click="test()">产品{{this.$store.state.count}}</h2>
    <div class="text">
      历史产品id：{{this.$store.state.historyPro.join(',')}}
    </div>
    <div class="proBox">
      <div class="boxTop">
        <ul>
          <li @click="switchPro(1)">类别1</li>
          <li @click="switchPro(2)">类别2</li>
          <li @click="switchPro(3)">类别3</li>
        </ul>
      </div>
      <div class="boxBody">
        <ProductList :productData="list"/>
      </div>
    </div>
    <div class="proBox">
      <div class="boxTop">
        最新产品
      </div>
      <div class="boxBody">
        <ProductList :productData="listLatest"/>
      </div>
    </div>
  </div>
</template>

<script>
  import router from '../router'
  import ProductList from './ProductList'
  import Api from '../api/index'


  export default {
    props: {},
    data() {
      return {
        rootApi: 'http://localhost:4000/',
        list: [],
        listLatest: [],
      }
    },
    components: {
      ProductList: ProductList
    },
    methods: {
      test(){
        this.$store.commit('increment');
      },
      switchPro(type) {
        this.getProductData(type);
      },
      goDetail(id) {
        router.push('/product/' + id);
      },
      getProductData(type) {
        Api.getProductList({
          data: {
            type: type,
            sort: "DESC",
            orderBy: "price",
          },
          success:(d)=>{
            this.list = d.data;
          }
        })
      },
      getLatestProductData() {
        Api.getProductList({
          data: {
            start: 0,
            limit: 2,
            sort: "DESC",
            orderBy: "create_date",
          },
          success:(d)=>{
            this.listLatest = d.data;
          }
        })
      }
    },
    mounted: function () {
      this.getProductData(1);
      this.getLatestProductData();
    },
  }




</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
  .proBox {clear: both;
    ul, li {list-style: none;margin: 0;padding: 0;}
    .boxTop {
      ul {
        display: flex; flex-direction: row; justify-content: space-between; text-align: center;
        li { width: 100px; background: #999;}
      }
    }
    .ulProList {
      clear: both;list-style: none;margin: 0;padding: 0; text-align: left;
      li {clear: both;list-style: none;margin: 0;padding: 0;
        .image {float: left;width: 100px;height: 100px;
          img {display: block;width: 90px;height: 90px; background: #999;}
        }
        .info {
          h4 {font-size: 12px;}
        }
      }
    }
  }
</style>
